import React, {Component} from 'react';
import {Dimensions, Modal, StyleSheet, Text, TouchableOpacity, View,ScrollView} from 'react-native';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../../constant/PHScreen";
import {COLOR_FOCUS, COLOR_GRAY_LINE} from "../../../constant/PHColors";
import Picker from 'react-native-picker';
import PropTypes from 'prop-types';


export default class SelectDatePlugIn extends Component {

    static propTypes = {
        closeBack:PropTypes.func,
        dateBack:PropTypes.func,
        defaultDate:PropTypes.string,
        textStyle: PropTypes.style,
    };
    
    constructor(props) {
        super(props);

        let date = new Date();
        let year = date.getFullYear().toString();
        let month = (date.getMonth()+1).toString();
        if(Number(month)<10){
            month = '0'+month
        }
        let day = date.getDate().toString();
        if(Number(day)<10){
            day = '0'+day
        }
        let opdate = year+'-'+month+'-'+day;

        this.state = {
            defaultDate:this.props.defaultDate?this.props.defaultDate:opdate,
        };
    }

    render() {
        return (
            <TouchableOpacity  onPress={()=>this._showDatePicker()}>
                <Text style={this.props.textStyle}>
                    {this.state.defaultDate}
                </Text>
            </TouchableOpacity>
        );
    }

    //打开日期选择 视图
    _showDatePicker() {
        let year = '';
        let month = '';
        let day = '';
        let dateStr = this.state.defaultDate;
        //console.log('dateStr',dateStr)
        year = dateStr.substring(0,4);
        month = parseInt(dateStr.substring(5,7));
        day = parseInt(dateStr.substring(8,10));
        Picker.init({
            pickerConfirmBtnColor:[74, 101, 255, 1],
            pickerCancelBtnColor:[153,153,153,1],
            pickerTitleText:'日期选择',
            pickerCancelBtnText:'取消',
            pickerConfirmBtnText:'确定',
            selectedValue:[year+'年',month+'月',day+'日'],
            pickerBg:[255,255,255,1],
            pickerData: this._createDateData(),
            pickerFontColor: [33, 33 ,33, 1],
            onPickerConfirm: (pickedValue, pickedIndex) => {
                let year = pickedValue[0].substring(0,pickedValue[0].length-1);
                let month = pickedValue[1].substring(0,pickedValue[1].length-1);
                month = month.padStart(2,'0');
                let day = pickedValue[2].substring(0,pickedValue[2].length-1);
                day = day.padStart(2,'0');
                let str = year+'-'+month+'-'+day;
                this.setState({defaultDate:str});
                this.props.dateBack(str);
            },
            onPickerCancel: (pickedValue, pickedIndex) => {
                console.log('date', pickedValue, pickedIndex);
            },
            onPickerSelect: (pickedValue, pickedIndex) => {
                console.log('date', pickedValue, pickedIndex);
            }
        });
        Picker.show();
    }

    //组装日期数据
    _createDateData(){
        let date = [];
        let currDate = new Date();
        let year = currDate.getFullYear()+5;
        let month = currDate.getMonth()+1;
        for(let i=2000;i<=year;i++){
            let month = [];
            for(let j = 1;j<13;j++){
                let day = [];
                if(j === 2){
                    for(let k=1;k<29;k++){
                        day.push(k+'日');
                    }
                    //Leap day for years that are divisible by 4, such as 2000, 2004
                    if(i%4 === 0){
                        day.push(29+'日');
                    }
                }
                else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
                    for(let k=1;k<32;k++){
                        day.push(k+'日');
                    }
                }
                else{
                    for(let k=1;k<31;k++){
                        day.push(k+'日');
                    }
                }
                let _month = {};
                _month[j+'月'] = day;
                month.push(_month);
            }
            let _date = {};
            _date[i+'年'] = month;
            date.push(_date);
        }
        return date;
    }
}

const styles = StyleSheet.create({
    textStyle:{
        fontSize:18,
    },

    content:{
        width:'100%',
        flexDirection:'row',
        justifyContent:'space-around'
    },

});